<template>
  <a-spin :spinning="confirmLoading">
    <j-form-container :disabled="formDisabled">
      <a-form :form="form" slot="detail" class="ant-form ant-form-horizontal">
        <a-card  id="staffCard" class="ant-card ant-card-bordered" style="margin: 0px auto; width: 1000px;">
          <span id="staffLeaveTitle">公文收文</span>
        <table border="1px" id="staffEvectionTable">
          <tr class="trPadding">
            <td  style="text-align: center"><span>来文单位：</span></td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['sourceUnit',validatorRules.sourceUnit]" placeholder="请输入来文单位" class="inputHeight" read-only></a-input>
              </a-form-item>
            </td>
            <td style="text-align: center"><span>收文日期：</span></td>
            <td>
              <a-form-item>
                <a-date-picker placeholder="请选择收文日期" v-decorator="['receiptDate']" :trigger-change="true" disabled/>
              </a-form-item>
            </td>
          </tr>
          <tr class="trPadding">
            <td  style="text-align: center">
              <span>文件标题：</span>
            </td>
            <td colspan="3" class="title">
              <a-form-item>
                <a-input v-decorator="['title',validatorRules.title]" placeholder="请输入文件标题" class="inputHeight" read-only></a-input>
              </a-form-item>
            </td>
          </tr>
          <tr class="trPadding">
            <td  style="text-align: center">
              <span>缓急：</span>
            <td>
              <a-form-item>
                <j-dict-select-tag
                  type="list"
                  v-decorator="['urgency']"
                  :trigger-change="true"
                  dictCode="urgency"
                  placeholder="请选择缓急"
                  class="inputHeight"
                  :disabled="true"
                  style="width: 52%"/>
              </a-form-item>
            </td>
            <td  style="text-align: center">
              <span>密级：</span>
            </td>
            <td>
              <a-form-item >
                <j-dict-select-tag
                  type="list" v-decorator="['secretLevel']"
                  :trigger-change="true"
                  dictCode="secret_level"
                  placeholder="请选择密级"
                  class="inputHeight"
                  :disabled="true"
                  style="width: 52%"/>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>收文编号：</span>
            </td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['receiptCode',validatorRules.receiptCode]" placeholder="请输入收文编号" class="inputHeight" read-only></a-input>
              </a-form-item>
            </td>
            <td>
              <span>来文字号：</span>
            </td>
            <td class="title">
              <a-form-item>
                <a-input v-decorator="['issuedCode',validatorRules.issuedCode]" placeholder="请输入来文字号" class="inputHeight" read-only></a-input>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>公文内容：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <j-upload :bizPath="filePath" v-model="officialContents" placeholder="请输入公文内容"  :disabled="true"></j-upload>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>发文附件：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <j-upload :bizPath="filePath" v-model="fileUrl" placeholder="请输入发文附件" :disabled="true"></j-upload>
              </a-form-item>
            </td>
          </tr>

          <tr>
            <td>
              <span>拟办意见:</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['draftOpinion']" placeholder="请输入拟办意见" class="textType" :disabled="isDisabledAuth('received:proposed')" ></a-textarea>
              </a-form-item>
            </td>
          </tr>

          <tr>
            <td>
              <span>办公室领导意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['officeComments']" placeholder="请输入办公室领导意见" class="textType"   :disabled="isDisabledAuth('received:suggestions')"></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>主办部门意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['sponsorComments']" placeholder="请输入主办部门意见" class="textType"   :disabled="isDisabledAuth('received:host')"></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>协办部门意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['coSponsorComments']" placeholder="请输入协办部门意见" class="textType" :disabled="isDisabledAuth('received:co:organizers')"></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>领导审核意见：</span>
            </td>
            <td colspan="3">
              <a-form-item>
                <a-textarea v-decorator="['leaderInstructions']" placeholder="请输入领导审核意见" class="textType"   :disabled="isDisabledAuth('received:instructions')"></a-textarea>
              </a-form-item>
            </td>
          </tr>
          <tr>
            <td>
              <span>传阅部门：</span>
            </td>
            <td colspan="3" class="title">
              <a-form-item>
                <j-select-depart v-decorator="['circulationDepts']" :customReturnField="customReturnField" :disabled="true"/>
              </a-form-item>
            </td>
          </tr>
        </table>
        </a-card>
        <a-row>
          <a-col  :span="24" style="text-align: center;margin-top: 10px">
            <a-button key="send" type="primary" @click="submitForm">提 交</a-button>
          </a-col>
        </a-row>
      </a-form>
    </j-form-container>
  </a-spin>
</template>

<script>

  import { httpAction, getAction } from '@/api/manage'
  import pick from 'lodash.pick'
  import { validateDuplicateValue } from '@/utils/util'
  import JFormContainer from '@/components/jeecg/JFormContainer'
  import JDate from '@/components/jeecg/JDate'
  import JUpload from '@/components/jeecg/JUpload'
  import moment from 'moment'
  import JSelectDepart from '@/components/jeecgbiz/JSelectDepart'
  import {DisabledAuthFilterMixin} from '@/mixins/DisabledAuthFilterMixin'

  export default {
    name: "OaOfficialdocReceivedForm",
    components: {
      JFormContainer,
      JDate,
      JUpload,
      JSelectDepart
    },
    mixins: [DisabledAuthFilterMixin],
    props: {
      //流程表单data
      formData: {
        type: Object,
        default: ()=>{},
        required: false
      },
      //表单模式：false流程表单 true普通表单
      normal: {
        type: Boolean,
        default: false,
        required: false
      },
      //表单禁用
      disabled: {
        type: Boolean,
        default: false,
        required: false
      }
    },
    data () {
      return {
        form: this.$form.createForm(this),
        model: {},
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
        confirmLoading: false,
        validatorRules: {
          sourceUnit: {
            rules: [
              { required: true, message: '请填写来文单位!' }
            ]
          },
          title: {
             rules: [
              { required: true, message: '请填写标题!' }
            ]
          },
          receiptCode: {
            rules: [
              { required: true, message: '请填写收文编号!' }
            ]
          },
          issuedCode: {
            rules: [
              { required: true, message: '请填写来文字号!' }
            ]
          },
        },
        url: {
          add: "/eoa/officialdoc/oaOfficialdocReceived/add",
          edit: "/eoa/officialdoc/oaOfficialdocReceived/edit",
          queryById: "/eoa/officialdoc/oaOfficialdocReceived/queryById",
        },
        filePath: 'enclosure',
        DrafTextPath: 'draftText',
        fileUrl:[],
        officialContents:[],
        customReturnField:"id",
      }
    },
    computed: {
      formDisabled(){
        if(this.normal===false){
        }
        return this.disabled
      },
      showFlowSubmitButton(){
        if(this.normal===false){
          if(this.formData.disabled===false){
            return true
          }else{
            return false
          }
        }else{
          return false
        }
      }
    },
    created () {
      //如果是流程中表单，则需要加载流程表单data
      this.showFlowData();
    },
    methods: {
      add () {
        this.edit({});
      },
      edit (record) {
        this.form.resetFields();
        this.model = Object.assign({}, record);
        this.visible = true;
        console.log(record)
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model,'sourceUnit','title','secretLevel','urgency','receiptCode','issuedCode','draftOpinion','officeComments','sponsorComments','coSponsorComments','leaderInstructions','circulationDepts'))
        })
        this.form.setFieldsValue({receiptDate:this.model.receiptDate?moment(this.model.receiptDate,"YYYY-MM-DD"):moment(new Date(),"YYYY-MM-DD")})
        this.officialContents=this.model.officialContents;
        this.fileUrl=this.model.fileUrl
      },

      //渲染流程表单数据
      showFlowData(){
        if(this.normal === false){
          let params = {id:this.formData.dataId};
          getAction(this.url.queryById,params).then((res)=>{
            if(res.success){
              this.edit (res.result);
            }
          });
        }
      },
      submitForm () {
        const that = this;
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
            let formData = Object.assign(this.model, values);
            console.log("formData",formData)
            formData.fileUrl=this.fileUrl
            formData.officialContents=this.officialContents
            console.log("表单提交数据",formData)
            httpAction(httpurl,formData,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                that.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
            })
          }
         
        })
      },
      popupCallback(row){
        this.form.setFieldsValue(pick(row,'sourceUnit','receiptDate','title','secretLevel','urgency','receiptCode','issuedCode','officialContents','fileUrl','draftOpinion','officeComments','sponsorComments','coSponsorComments','leaderInstructions','circulationDepts','stauts','bpmStatus','createBy','createTime','updateBy','updateTime','sysOrgCode'))
      }
    }
  }
</script>

<style>
  .inputHeight {
    width: 100%;
    border: none;
    border-radius: 0;
    background:#fff;
  }

  .textType {
    resize: none;
    height: 118px !important;
    font-size: 12px;
    border: 0 solid white;
    border-radius: 0;
    margin-bottom: 0;
  }
  .textareaType{
    width: 100%;
    height: 100%;
    position: relative;
    top: 22px;
    right: 6px;
    resize:none;
  }
  .title .ant-form-explain {
    margin-top:10px !important;
  }
  #staffCard {
    border: 1px solid #fff;
    box-shadow: 0 0 1px 1px #aaa, 3px 0 5px 0 #aaa, 0 4px 7px 0 #aaa;
    border-radius: 5px;
  }
  #staffLeaveTitle {
    margin-top: 1px;
    font-weight: 700;
    text-align: center;
    display: block;
    color: #000;
    font-size: 24px;
  }
  #staffEvectionTable {
    width: 100%;
    font-size: 12px;
    text-align: center;
    background-color: #fff;
    margin-top: 10px;
  }
  #staffEvectionTable .input .ant-input, #staffEvectionTable .text {
    border: 0 solid #000!important;
    border-radius: 0;
    background-color: #fff;
    margin: 0 auto;
    width: 100%;
    font-size: 12px;
    height: 38px;
  }
  #staffEvectionTable .ant-form-item {
    margin: 0;
  }
</style>